.profile {
  max-width: 800px;
  margin: 24px auto;
  padding: 0 24px;

  :global {
    .ant-card {
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
      background: #fff;

      .ant-card-head {
        border-bottom: 1px solid #f0f0f0;
        padding: 16px 24px;

        .ant-card-head-title {
          font-size: 18px;
          font-weight: 600;
          color: #1a1a1a;
        }
      }

      .ant-card-body {
        padding: 24px;
      }
    }

    .ant-form-item-label > label {
      font-weight: 500;
      color: #1a1a1a;
    }

    .ant-upload.ant-upload-select-picture-circle {
      width: 128px;
      height: 128px;
      margin: 0;
      border-radius: 50%;
      overflow: hidden;
      border: 1px dashed #d9d9d9;
      background: #fafafa;
      display: flex;
      align-items: center;
      justify-content: center;

      &:hover {
        border-color: #1890ff;
      }

      .ant-upload {
        padding: 0;
      }
    }

    .ant-avatar {
      border-radius: 50%;
      cursor: pointer;
      width: 100%;
      height: 100%;
      
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }

  .avatar {
    display: flex;
    justify-content: center;
    margin-bottom: 32px;
  }

  .uploadAvatar {
    :global {
      .ant-upload {
        border-radius: 50%;
        overflow: hidden;
      }
    }
  }

  .form {
    max-width: 600px;
    margin: 0 auto;

    :global {
      .ant-input,
      .ant-picker {
        border-radius: 4px;
        height: 40px;

        &:hover,
        &:focus {
          border-color: #1890ff;
        }
      }

      .ant-radio-group {
        display: flex;
        gap: 32px;
      }

      .ant-form-item-control-input-content {
        .ant-space {
          width: 100%;
          justify-content: center;
          margin-top: 24px;
        }
      }

      .ant-btn {
        min-width: 120px;
        height: 40px;
        border-radius: 4px;
        font-weight: 500;

        &-primary {
          background: #1890ff;
          border-color: #1890ff;

          &:hover {
            background: #40a9ff;
            border-color: #40a9ff;
          }
        }
      }
    }
  }
} 